import Vue from 'vue'

const component = {
    template: `
        <div>
            <input type="text" v-model="text">
            <span v-show="active">see me active</span>
            <br>
            <span v-text="propOne" @click="handleChange"></span>
        </div>
    `,
    data(){
        return {
            text: 123
        }
    },
    // props中的属性不能被修改 props是外部组件来约束子组件的展示行为的
    props: {
        active: {
            // type: Boolean,
            // required: true,
            // default: false,
            // default(){
            //     return {}
            // }
            validator(value){
                return typeof value === 'boolean'
            }
        },
        propOne: String,
        onChange: Function
    },
    methods: {
        handleChange(){
            // this.onChange()
            this.$emit("change")
        }
    }
}
// 全局组件
// Vue.component('Comp', component)

new Vue({
    data: {
        propOne: 'hello'
    },
    components: {
        Comp: component
    },
    mounted(){
        console.log(this.$refs.comp1)
    },
    el: '#root',
    template: '<div><Comp ref="comp1" :prop-one="propOne" @change="handleChange" :on-change="handleChange" :active="true"></Comp></div>',
    methods: {
        handleChange(){
            this.propOne += 1
        }
    }
})